<template>
    <div class="realname_details">
        <div class="header"><i @click='goBack' class="iconfont icon-xia"></i>实名认证</div>
        <div class="content">
            <div class="id_card">
                <div class="head" style="overflow: hidden;">
                    <img style="width: 100%;height: 100%;" :src='$store.state.userinfo.user_head' alt="">
                </div>
                <div class="con">
                    <p>您已实名认证</p>
                    <p class="username">{{$store.state.userinfo.username ? $store.state.userinfo.username: $store.state.userinfo.telphone }}</p>
                    <p class="id">{{$store.state.userinfo.idcard[0]}}****************{{$store.state.userinfo.idcard[17]}}</p>
                </div>
            </div>
            <div class="bt">
                <i class="iconfont icon-shimingrenzhengmoren"></i>
                <p>审核通过</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'realname_details',
  data() {
    return {

    };
  },
  methods: {
    goBack() {
      this.$router.replace({ name: 'usercenter' });
    },
  },
};
</script>

<style lang="scss" scoped>
 @import "@/css/public.scss";
 $public-color: -webkit-linear-gradient(408deg,#ffb001,#f6b21c 13%,#ff9800);
 @mixin br{
     border:1px solid red;
 }
body{
    .realname_details{
        .header{
            height: vw(49);
            line-height: vw(49);
            position: relative;
            text-align: center;
            font-size: vw(16);
            color:#ffffff;
            font-weight: 600;
            background: $public-color;
            i{
                position: absolute;
                color:#ffffff;
                font-size: vw(20);
                display: inline-block;
                line-height: vw(20);
                height: vw(20);
                width: vw(20);
                top: vw(24);
                left: vw(20);
                margin-top: vw(-10);

            }
        }
        .content{
            padding: vw(34) vw(25) vw(36);
            .id_card{
                margin-bottom: vw(36);
                @include br;
                position: relative;
                height: vw(200);
                border-radius: vw(6);
                background:-webkit-linear-gradient(408deg, #f8ad06, #eaa40a 13%, #fbb247);
                .head{
                    @include br;
                    position: absolute;
                    width: vw(62);
                    height: vw(62);
                    left: 50%;
                    margin-left: vw(-31);
                    margin-top: vw(-19);
                    border-radius: vw(31);
                }
                .con{
                    margin-left: vw(35);
                    margin-top: vw(68);
                    color: #ffffff;
                    p:first-child{
                        line-height: vw(34);
                        height: vw(34);
                        font-weight: 600;
                    }
                    .username{
                        line-height: vw(31);
                        height: vw(31);
                        font-size: vw(16);
                    }
                    .id{
                        line-height: vw(25);
                        height: vw(25);
                        font-size: vw(14);
                    }
                }
            }
        .bt{
            position: relative;
            color: #ffb001;
            height: vw(51);
            border-radius: vw(25.5);
            box-shadow: 0px 1px 9px 4px #ffb001;
            i{
                position: absolute;
                text-align: center;
                line-height: vw(35);
                font-size: vw(25);
                left: vw(25);
                top: 50%;
                margin-top: vw(-17.5);
                width: vw(35);
                height: vw(35);
            }
            p{
                padding-left: vw(73);
                line-height: vw(51);
                font-size: vw(16);
                color:#172f62;
            }
        }
        }
    }
}
</style>
